<template>
  <div style="padding: 20px">
    <a-alert message="表格汇总" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>bordered: 是否为边框表格</div>
        <div>columns: 表格配置项,fixed设置固定</div>
        <div>data-request: 表格数据</div>
        <div>toolbar: 工具栏</div>
        <div>row-selection: 勾选表格配置项</div>
        <div>expandedRowRender插槽设置展开表格</div>
      </template>
    </a-alert>
    <div class="demoTittle">基础表格</div>
    <div class="demoTittle2 marginBtm18">基础表格</div>
    <div p-5>
      <DynamicTable
        :data-request="loadData1"
        :columns="columns"
        :scroll="{
          y: 'calc(100vh - 360px)',
        }"
      >
        <template #toolbar>
          <a-button type="primary"> 新建任务 </a-button>
        </template>
      </DynamicTable>
    </div>
    <div class="demoTittle2 marginBtm18">边框表格</div>
    <div p-5>
      <DynamicTable
        bordered
        :data-request="loadData1"
        :columns="columns"
        :scroll="{
          y: 'calc(100vh - 360px)',
        }"
      >
        <template #toolbar>
          <a-button type="primary"> 新建任务 </a-button>
        </template>
      </DynamicTable>
    </div>
    <div class="demoTittle2 marginBtm18">勾选表格</div>
    <div p-5>
      <DynamicTable
        bordered
        :showIndex="true"
        :data-request="loadData1"
        :columns="columns"
        :row-key="(record) => record.id"
        :row-selection="{
          selectedRowKeys: selectedRowKey,
          onChange: onRowChange,
          preserveSelectedRowKeys: true,
        }"
      >
        <template #toolbar>
          <a-button> 导入文件 </a-button>
          <a-button> 导出文件 </a-button>
          <a-button type="primary"> 添加功能 </a-button>
        </template>
      </DynamicTable>
    </div>
    <div class="demoTittle2 marginBtm18">只读表格</div>
    <div p-5>
      <a-descriptions
        :labelStyle="{ width: '160px' }"
        :content-style="{ color: '#444444', width: 'calc(100% / (24 / 5))' }"
        bordered
      >
        <a-descriptions-item label="设备编号" :span="1">DZ-CJA-001</a-descriptions-item>
        <a-descriptions-item label="设备名称" :span="1">切削机床CRSR980</a-descriptions-item>
        <a-descriptions-item label="设备型号" :span="1">DZ-CJA-001</a-descriptions-item>
        <a-descriptions-item label="设备名称" :span="1">切削机床CRSR980</a-descriptions-item>
        <a-descriptions-item label="设备型号" :span="1">DZ-CJA-001</a-descriptions-item>
        <a-descriptions-item label="设备状态" :span="1">待处理</a-descriptions-item>
      </a-descriptions>
    </div>

    <div class="demoTittle2 marginBtm18">展开表格（内容）</div>
    <div p-5>
      <DynamicTable
        bordered
        :showIndex="true"
        :data-request="loadData1"
        :columns="columns"
        :row-key="(record) => record.id"
        :row-selection="{
          selectedRowKeys: selectedRowKey2,
          onChange: onRowChange2,
          preserveSelectedRowKeys: true,
        }"
      >
        <template #toolbar>
          <a-button> 导入文件 </a-button>
          <a-button> 导出文件 </a-button>
          <a-button type="primary"> 添加功能 </a-button>
        </template>
        <template #expandedRowRender="{ record }">
          <p style="margin: 0">
            {{ record.checkerName }}
          </p>
        </template>
      </DynamicTable>
    </div>
    <div class="demoTittle2 marginBtm18">内嵌表格（表格）</div>
    <div p-5>
      <DynamicTable
        bordered
        :showIndex="true"
        :data-request="loadData1"
        :columns="columns"
        :row-key="(record) => record.id"
        :row-selection="{
          selectedRowKeys: selectedRowKey2,
          onChange: onRowChange2,
          preserveSelectedRowKeys: true,
        }"
      >
        <template #toolbar>
          <a-button> 导入文件 </a-button>
          <a-button> 导出文件 </a-button>
          <a-button type="primary"> 添加功能 </a-button>
        </template>
        <template #expandedRowRender="{ record }">
          <div style="background-color: #ffffff; padding: 20px">
            <DynamicTable bordered :data-request="loadData1" :columns="columns" :search="false">
            </DynamicTable>
          </div>
        </template>
      </DynamicTable>
    </div>
    <div class="demoTittle2 marginBtm18">表格行合并</div>
    <div p-5>
      <DynamicTable
        bordered
        :data-request="loadData1"
        :columns="columns"
        :scroll="{
          y: 'calc(100vh - 360px)',
        }"
      >
        <template #summary>
          <a-table-summary fixed>
            <a-table-summary-row>
              <a-table-summary-cell :index="0">Summary</a-table-summary-cell>
              <a-table-summary-cell :index="1" :col-span="6"
                >This is a summary content</a-table-summary-cell
              >
              <a-table-summary-cell :index="1"></a-table-summary-cell>
            </a-table-summary-row>
          </a-table-summary>
        </template>
      </DynamicTable>
    </div>
    <div class="demoTittle2 marginBtm18">可编辑表格</div>
    <Card style="margin-top: 20px">
      <DynamicTable
        size="small"
        bordered
        :data-request="loadData2"
        :columns="tableColumns"
        :editable-type="editableType"
        :on-save="handleSave"
        :on-cancel="handleCancelSave"
        row-key="id"
      >
        <template #toolbar>
          <Select ref="select" v-model:value="editableType">
            <Select.Option value="single">单行编辑</Select.Option>
            <Select.Option value="multiple">多行编辑</Select.Option>
            <Select.Option value="cell">可编辑单元格</Select.Option>
          </Select>
        </template>
      </DynamicTable>
    </Card>
    <div class="demoTittle2 marginBtm18">固定列</div>
    <div p-5>
      <DynamicTable
        bordered
        :data-request="loadData1"
        :columns="columns3"
        :search="false"
        :scroll="{ x: 1600 }"
      >
      </DynamicTable>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { Taskcolumns, type TableColumnItem } from './columns1';
  import { columns2, tableData } from './columns2';
  import { Taskcolumns3, type TableColumnItem3 } from './columns3';

  import type {
    OnChangeCallbackParams,
    EditableType,
    OnSave,
    OnCancel,
  } from '@/components/core/dynamic-table';
  import { useTable } from '@/components/core/dynamic-table';

  import { Alert, Card, Select, message } from 'ant-design-vue';

  import { getTaskList } from '@/api/supervision/task-management';
  import { computed, ref } from 'vue';
  const [DynamicTable, dynamicTableInstance] = useTable();

  import { waitTime } from '@/utils/common';

  const editableType = ref<EditableType>('cell');

  const selectedRowKey = ref([] as any);
  const selectedRowKey2 = ref([] as any);

  const loadData1 = async (params): Promise<API.TableListResult> => {
    const data = await getTaskList(params);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const loadData2 = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    console.log('params', params);
    console.log('onChangeParams', onChangeParams);
    await waitTime(500);

    return {
      list: tableData,
      ...params,
    };
  };

  const tableColumns = computed<typeof columns2>(() => [
    ...columns2,
    {
      title: '操作',
      align: 'center',
      hideInTable: editableType.value === 'cell',
      width: 200,
      dataIndex: 'ACTION',
      actions: ({ record }, action) => {
        const { startEditable, cancelEditable, isEditable, getEditFormModel, validateRow } = action;
        return isEditable(record.id)
          ? [
              {
                label: '保存',
                onClick: async () => {
                  const result = await validateRow(record.id);
                  message.loading({ content: '保存中...', key: record.id });
                  console.log('result', result);
                  console.log('保存', getEditFormModel(record.id));
                  await waitTime(2000);
                  cancelEditable(record.id);
                  message.success({ content: '保存成功!', key: record.id, duration: 2 });
                },
              },
              {
                label: '取消',
                onClick: () => {
                  cancelEditable(record.id);
                },
              },
            ]
          : [
              {
                label: '编辑',
                onClick: () => {
                  startEditable(record.id, record);
                },
              },
            ];
      },
    },
  ]);

  const columns: TableColumnItem[] = [
    ...Taskcolumns,
    {
      title: '操作',
      align: 'left',
      fixed: 'right',
      width: 160,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '查看',
        },
        {
          label: '编辑',
          ifShow: record.editShowFlag == 1,
        },
        {
          label: '删除',
          ifShow: record.deleteShowFlag == 1,
        },
        {
          label: '处理',
          ifShow: record.handleShowFlag == 1,
        },
        {
          label: '下载检查结果表',
          ifShow: record.taskStatus == 5,
        },
      ],
    },
  ];

  const columns3: TableColumnItem3[] = [
    ...Taskcolumns3,
    {
      title: '操作',
      align: 'left',
      fixed: 'right',
      width: 160,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '查看',
        },
        {
          label: '编辑',
          ifShow: record.editShowFlag == 1,
        },
        {
          label: '删除',
          ifShow: record.deleteShowFlag == 1,
        },
        {
          label: '处理',
          ifShow: record.handleShowFlag == 1,
        },
        {
          label: '下载检查结果表',
          ifShow: record.taskStatus == 5,
        },
      ],
    },
  ];

  const handleCancelSave: OnCancel = (rowKey, record, originRow) => {
    console.log('handleCancelSave', rowKey, record, originRow);
  };

  const handleSave: OnSave = async (rowKey, record, originRow) => {
    console.log('handleSave', rowKey, record, originRow);
    await waitTime(2000);
  };

  const onRowChange = (selectIds, selectedItems) => {
    selectedRowKey.value = selectIds;
  };
  const onRowChange2 = (selectIds, selectedItems) => {
    selectedRowKey2.value = selectIds;
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }
  .marginBtm18 {
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }

  tfoot th,
  tfoot td {
    background: #fafafa;
  }
  [data-theme='dark'] tfoot th,
  [data-theme='dark'] tfoot td {
    background: #1d1d1d;
  }
</style>
